<template>
<div class="components-page">
  <div class="title-bg">产能利用率</div>
    <div class="plan">
      <div class="item">
        <span>近30个工作日产能利用率</span>
      </div>
       <div class="item">
        <span>日平均39.4%</span>
      </div>
    </div>
  <div class="barChart" ref="barChart"></div>
</div>
</template>

<script>
export default {
  data() {
    return {
      myBarChart: null,
      barChartOptions: {
        color: ["#2f89cf"],
        //表格大小
        grid: {
          left: "2%",
          top: "5%",
          right: "2%",
          bottom: "4%",
          containLabel: true,
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效,影子效果
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        xAxis: [{
          type: "category",
          data: [
            "动作片",
            "动画片",
            "电视剧",
            "纪录片",
            "综艺片",
            "伦理片",
            "恐怖片",
          ],
          axisTick: {
            alignWithLabel: true,
          },
          axisLabel: {
            color: "#ffffff",
            fontSize: "12",
          },
        }, ],
        yAxis: [{
          type: "value",
          axisLabel: {
            color: "#ffffff",
            fontSize: "12",
             formatter: '{value} %'
          },
          lineStyle: {
            color: "rgba(255,255,255,.1)",
          },
          splitLine: {
            lineStyle: {
              color: "rgba(255,255,255,.1)",
            },
          },
        }, ],
        series: [{
          name: "直接访问",
          type: "bar",
          itemStyle: {
            color: new this.$echarts.graphic.LinearGradient(
              0, 0, 0, 1,
              [{
                  offset: 0,
                  color: '#83bff6'
                },
                {
                  offset: 0.5,
                  color: '#188df0'
                },
                {
                  offset: 1,
                  color: '#188df0'
                }
              ]
            )
          },
          barWidth: "40%",
          data: [10, 52, 200, 334, 390, 330, 220],
        }, 
        ],
      }
    }
  },
  mounted() {
    this.initData()
  },
  methods: {
    initData() {
      this.createBarEchart()
    },
    createBarEchart() {
      this.myBarChart = this.$echarts
        .init(this.$refs.barChart)
        .setOption(this.barChartOptions);
      // window.addEventListener("resize", () => {
      //   this.myBarChart.resize();
      // });
    },
  }
}
</script>

<style lang="less" scoped>
.components-page {
  .title-bg {
    background: url("../../../assets/images/title-bg.png") no-repeat top center;
    background-size: 100% 100%;
    font-size: 16px;
    padding: 4px 10px;
    text-align: left;
    width: 160px;
    margin: 10px;
    color: #ffffff;
  }
  .plan {
    color: #35EFFE;
    font-size: 13px;
    display: flex;
    justify-content: flex-end;
    margin: 5px 0;
    .item {
      margin: 0 5px;
    }
  }



  .barChart {
    width: 100%;
    height: 2.841667rem;
  }
}
</style>
